<template>
  <!-- 底部波浪效果 -->
  <footer>
<!--    <div class="wave-container">-->
<!--      <div class="wave wave1"></div>-->
<!--      <div class="wave wave2"></div>-->
<!--    </div>-->
    <div class="footer-content">
      办公用品系统 ©2025 Created by 陈文涛
      <div>
        <!--        <span>蜀ICP备16029882号-1</span>
        <span>蜀ICP备16029882号-1</span>-->
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'FooterPage'
}
</script>

<style scoped>
/*底部波浪效果*/
footer {
  position: relative;
  height: 15vh; /* 波浪动画高度 */
  overflow: hidden;
  color: #6f6f6f;
  background: linear-gradient(to bottom, transparent, #bcd8f1);
  text-align: center;
  margin-top: 20px;
  border-radius: 5px;
}

.wave-container {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  overflow: hidden;
  line-height: 0;
}

.wave {
  position: absolute;
  top: 2rem;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform: translate3d(0, 0, 0);
}

.wave1 {
  /*background-image: url('@/assets/bannerWave1.png');*/ /* 你需要替换成实际的波浪图像 */
  animation: animateWave 20s linear infinite;
  z-index: 1000;
  opacity: 0.6;
}

.wave2 {
  /*background-image: url('@/assets/bannerWave2.png');*/ /* 你需要替换成实际的波浪图像 */
  animation: animateWave 35s linear infinite;
  z-index: 999;
}

@keyframes animateWave {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.footer-content {
  bottom: 0;
  position: relative;
  z-index: 1001;
  /* 其他样式 */
}
</style>
